<template>
  <div class="my">
    <div class="top">
      <div class="userInfo">
        <div class="img">
          <img src="../../assets/head.png" alt="" />
        </div>
        <div class="info">
          <div class="info-tp">
            {{info.mobile}} <span>（资管训练账号）</span>
          </div>
          <div class="info-bt">
            <div class="grade">普通用户</div>
            <div class="num">赛期豆：{{info.money}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-list line" @click="jump(1)">
        <mt-cell title="我的赛期豆" is-link>
          <img class="cell-img" slot="icon" src="../../assets/006.png">
        </mt-cell>
      </div>
      <div class="cont-list line" @click="jump(2)">
        <mt-cell title="业绩统计" is-link>
          <img class="cell-img" slot="icon" src="../../assets/002.png">
        </mt-cell>
      </div>
      <div class="cont-list line" @click="jump(3)">
        <mt-cell title="历史成交" is-link>
          <img class="cell-img" slot="icon" src="../../assets/004.png">
        </mt-cell>
      </div>
      <div class="cont-list cont-self"  >
         <img class="cell-img"  src="../../assets/009.png">
          <span class="cell-t">额度查询</span>
          <div class="cell-text-wrap" @click.stop="openPop" > 可用训练额度:0.00 <button class="cell-btn" >赠送</button></div>
          <img class="icon"  src="../../assets/rt.png"  @click="jump(4)" >
      </div>
      <div class="cont-list" style="margin-top:.3rem;" @click="jump(5)">
        <mt-cell title="我的推广" is-link>
          <img class="cell-img" slot="icon" src="../../assets/003.png">
        </mt-cell>
      </div>
      <div class="cont-list" style="margin-bottom:.3rem;" @click="jump(6)">
        <mt-cell title="消息中心" is-link>
          <img class="cell-img" slot="icon" src="../../assets/008.png">
        </mt-cell>
      </div>
      <div class="cont-list" style="margin-bottom:.3rem;" @click="jump(7)">
        <mt-cell title="在线客服" is-link>
          <img class="cell-img" slot="icon" src="../../assets/005.png">
        </mt-cell>
      </div>
      <div class="cont-list" style="margin-top:.3rem;" @click="jump(8)">
        <mt-cell title="设置" is-link>
          <img class="cell-img" slot="icon" src="../../assets/007.png">
        </mt-cell>
      </div>


      <div class="interval"></div>
    </div>
    <div class="commonFooter">
      <commonFooter active='mine'></commonFooter>
    </div>


    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
      <div class="box">
        <div class="box-close" @click="closeBox">
          <img src="../../assets/011.png" alt="" />
        </div>
        <div class="box-title">
          可赠训练额度:0.00(服务2%)
        </div>
        <div class="box-content">
          <div class="item">
            <mt-field label="用户名" placeholder="请输入接收用户名" v-model="username"></mt-field>
          </div>
          <div class="item">
            <mt-field label="手机号" placeholder="请输入接收用户手机号" v-model="mobile"></mt-field>
          </div>
          <div class="item">
            <mt-field label="登录密码" type="password" placeholder="请输入登录密码" v-model="password"></mt-field>
          </div>
          <div class="item">
            <mt-field label="训练额度" placeholder="请输入赠送训练额度" v-model="number"></mt-field>
          </div>
        </div>
        <div class="box-btn">
          <span>确认赠送</span>
        </div>
        <div class="box-text">
          注意:一旦点击确认赠送，训练额度就无法取消或回退!
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import commonFooter from './footer';
  export default {
    data() {
      return {
        info: {
          money: 0.00,
          mobile: ''
        },
        popupVisible: false,
        username: '',
        mobile: '',
        password: '',
        number: ''
      }
    },
    components: {
      commonFooter, //  底部导航
    },
    mounted() {
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        this.$get('addons/tf-futures/member/my-info').then(res => {
          if (res.code == 200) {
            console.log(res.data)
            this.info = res.data;
          } else {
            this.$layer.msg(res.message || $t("login_fail"));
          }
        });
      },
      jump(type) {
        if (type == 1) {
          this.$router.push({
            path: "/dou"
          });
        }
        if (type == 2) {
          this.$router.push({
            path: "/performance"
          });
        }
        if (type == 3) {
          this.$router.push({
            path: "/dealRecord"
          });
        }
        if (type == 4) {
          this.$router.push({
            path: "/limit"
          });
        }


        if (type == 5) {
          this.$router.push({
            path: "promotion"
          });
        }
        if (type == 6) {
          this.$router.push({
            path: "newsCenter"
          });
        }
        if (type == 7) {
          this.$router.push({
            path: "service"
          });
        }
        if (type == 8) {
          this.$router.push({
            path: "setting"
          });
        }
      },
      closeBox() {
        this.popupVisible = false;
      },
      openPop() {
        this.popupVisible = true;
      }
    }

  }
</script>
<style scoped="scoped">
  /deep/ .mint-popup {
    border-radius: .2rem !important;
  }

  .box-text {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ec1f1f;
    font-size: 24px;
    padding-bottom: 1.07rem;
  }

  .box-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .67rem 0 .24rem 0;
  }

  .box-btn span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.79rem;
    height: .74rem;
    background-color: #3192FB;
    color: #fff;
    font-size: 30px;
  }

  .box-title {
    font-size: 30px;
    color: #333;
    font-weight: 600;
    padding: .8rem .5rem;
  }

  .box {
    background-color: #fff;
    width: 682px;
    border-radius: .2rem !important;
    position: relative;
  }

  .box .box-close {
    position: absolute;
    right: .3rem;
    top: .4rem;
  }

  .box .box-close img {
    width: .4rem;
    height: .4rem;
  }

  .box-content .item {
    background-color: #fff;
    padding: 0 .2rem;
  }

  .item .mint-cell {
    background-color: #fff;
  }

  .item /deep/ .mint-cell-value input {
    background-color: #fff;
  }

  .item /deep/ .mint-cell-value input::placeholder {
    font-size: 30px;
    color: #a79f9f;
  }

  .item /deep/ .mint-cell-title {
    width: 1.8rem;
    font-size: 30px;
    color: #333;
  }

  .cont-list .mint-cell {
    background-color: #EBEBEB;
  }

  /deep/ .mint-cell-text {
    font-size: 30px;
    color: #333;
    font-weight: 600;
  }
  .cont-self{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #EBEBEB;
    height: 100px;
  }
.cont-self .cell-img{
  margin-left: 20px;
}
.cont-self .icon{
   width: 22px;
   height: auto;
   margin-right: 30px;
  }
 .cont-self .cell-text-wrap{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% - 320px);
    padding-right:20px;
 }
 .cont-self .cell-t{
   width: 200px;
   font-size: 30px;
   color: #333;
   font-weight: 600;
 }
  .my {
    width: 100%;
    min-height: 100vh;
    background-color: #D9D9D9;

  }

  .top {
    background-color: #14909A;
    width: 100%;
    height: 5rem;
  }

  .userInfo {
    padding-top: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .userInfo .img img {
    width: 1.48rem;
    height: 1.48rem;
    border-radius: 100%;
  }

  .info {
    padding-left: .14rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }

  .info-tp {
    font-size: 45px;
    color: #fff;
  }

  .info-tp span {
    font-size: 35px;
    color: #fff;

  }

  .info-bt {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: .25rem;
  }

  .info-bt .grade {
    font-size: 24px;
    color: #fff;
  }

  .info-bt .num {
    font-size: 24px;
    color: #fff;
    background-color: #12818C;
    padding: .08rem .16rem;
    border-radius: .15rem;
    margin-left: .34rem;
  }

  .interval {
    padding: 1rem 0;
  }

  .cell-img {
    width: .6rem;
    height: .6rem;
    margin-right: .5rem;
  }

  .cell-btn {
    background-color: #12818C;
    font-size: 24px;
    color: #fff;
    border-radius: .15rem;
    padding: .1rem .3rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .23rem;
     pointer-events: auto;
  }

  .cell-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #333;
    font-weight: 600;
    pointer-events: auto;
  }

  .line {
    border-bottom: 1px solid #E0E0E0;
  }
</style>
